<template>
  <div class="indexPage">

    <Head></Head>
    <div class="tabbox">
      <div class="headSty flex_str">
        <div style="margin-right: 20px;">户型状态:</div>
        <el-select placeholder="请选择户型状态" style="margin-right: 40px;" @change="changeStatus" v-model="params.status">
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <div style="margin-right: 10px;">时间范围：</div>
        <div class="timeSty">
          <el-config-provider :locale="zhCn">
            <el-date-picker v-model="pickerTime" type="daterange" range-separator="-" start-placeholder="开始时间"
              end-placeholder="结束时间" @change="dataPicker" />
          </el-config-provider>

        </div>
        <div class="creatBtnSty" @click="getHouseList">查询</div>
      </div>
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="communityName" label="小区名" />
        <el-table-column prop="recordName" label="备案名" width="180" />
        <el-table-column prop="position" label="定位" width="200" />
        <el-table-column prop="buildingNo" label="楼栋号" width="80" />
        <el-table-column prop="constructionArea" label="建筑面积" width="80" />
        <el-table-column prop="createTime" label="添加时间" width="180" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <div>{{ statusCom(scope.row.status) }}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="passHouse(scope.row.id)"
              v-if="scope.row.status != '1' && scope.row.status != '3'">通过</el-button>
            <el-button link type="primary" size="small" @click="adoptFun(scope.row.id)"
              v-if="scope.row.status != '2' && scope.row.status != '3' && scope.row.status != '1'">拒绝</el-button>
            <el-button link type="primary" size="small" @click="LowerHouse(scope.row.id)"
              v-if="scope.row.status != '3' && scope.row.status != '0'">下架</el-button>

            <el-button link type="primary" size="small" @click="passHouse(scope.row.id)"
              v-if="scope.row.status == '3'">上架</el-button>

            <el-button link type="primary" size="small" @click="infoSee(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer ">
        <el-pagination v-model:current-page="params.current" v-model:page-size="params.size"
          :page-sizes="[10, 15, 30, 50, 100]" :small="small" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
  <adoptDialog v-model="dialog.isShow" :id="houseId" @close="close">
  </adoptDialog>
  <lowerDialogVue v-model="dialog.lowerShow" :id="houseId" @close="lowerClose"></lowerDialogVue>
  <infoDialogVue v-model="dialog.infoIsshow" :id="houseId" @close="infoClose"></infoDialogVue>
  <div ref="demoDom">111</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue"
import Head from "@/components/head/index.vue";
import { ElTable, ElMessage } from 'element-plus'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import adoptDialog from './dialog/adoptDialog.vue'
import infoDialogVue from "./dialog/infoDialog.vue";
import lowerDialogVue from "./dialog/lowerDialog.vue";
import { formatDayTime, formatToEndTime } from '@/utils/moment'
import { getHouseListApi, passHouseApi } from '@/api/index/index'

const demoDom = ref(null)
console.log('获取dom1', demoDom.value)
onMounted(() => {
  console.log('获取dom2', demoDom.value)

})
function getFifFormatDate() {
  var fiftingTime = new Date().getTime() - 24 * 60 * 60 * 1000 * 15
  var fifting = new Date(fiftingTime)
  var fiftingDate =
    fifting.getFullYear() +
    '-' +
    (fifting.getMonth() > 8
      ? fifting.getMonth() + 1
      : '0' + (fifting.getMonth() + 1)) +
    '-' +
    (fifting.getDate() > 9 ? fifting.getDate() : '0' + fifting.getDate())
  return fiftingDate
}
const pickerTime = ref([]);
const dialog = reactive({
  isShow: false,
  infoIsshow: false,
  lowerShow: false
})
const total = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const statusList = ref([
  {
    label: '全部',
    value: null
  },
  {
    label: '待审核',
    value: 0
  }, {
    label: '已通过',
    value: 1
  }, {
    label: '未通过',
    value: 2
  }, {
    label: '已下架',
    value: 3
  }
])
const tableData = ref<any[]>([])

const params = reactive<any>({
  current: 1,
  size: 10,
  startDate: getFifFormatDate(),
  endDate: formatToEndTime().substring(0, 10),
  status: null
})

const houseId = ref(0)
const handleSizeChange = (val: number) => {
  params.size = val
  getHouseList()
}
const handleCurrentChange = (val: number) => {
  params.current = val
  getHouseList()
}
// 拒绝
const adoptFun = (id: number) => {
  houseId.value = id
  dialog.isShow = !dialog.isShow
}
// 通过
const passHouse = (id: number) => {
  passHouseApi({
    id: id
  }).then((res: any) => {
    if (res.status == 200) {
      ElMessage.success('操作成功')
      params.status = 0
      getHouseList()
    }
  })
}
// 下架
const LowerHouse = (id: number) => {
  houseId.value = id
  dialog.lowerShow = true
}
// 查看详情
const infoSee = (id: number) => {
  houseId.value = id
  dialog.infoIsshow = true
}
const close = () => {
  params.status = 0;
  getHouseList()
  dialog.isShow = false
}
const lowerClose = () => {
  params.status = 0;
  getHouseList()
  dialog.lowerShow = false
}
const infoClose = () => {
  dialog.infoIsshow = false
}

const getHouseList = () => {
  getHouseListApi(params).then((res: any) => {
    tableData.value = res.data.records
    total.value = res.data.total
  })
}
const dataPicker = (e: any) => {
  if (e == null) {
    params.startDate = ''
    params.endDate = ''
    getHouseList()
  } else {
    params.startDate = formatDayTime(e[0])
    params.endDate = formatDayTime(e[1])
    getHouseList()
  }

}
const changeStatus = (num: number | null) => {
  params.status = num;
  getHouseList()
}

const statusCom = computed(() => {
  return (value: any) => {
    if (value == 0) {
      return '待审核'
    } else if (value == 1) {
      return '已通过'
    } else if (value == 2) {
      return '未通过'
    } else if (value == 3) {
      return '已下架'
    }
  }
})

onMounted(() => {
  getHouseList()
})

</script>
<style scoped>

.creatBtnSty {
    padding: 6px 20px;
    background-color: #409EFE;
    color: #fff;
    border-radius: 6px;
}
.footer {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 20px;
}

.headSty {
  margin-bottom: 20px;
}

.timeSty {
  width: 400px;
}

.searchBtnSty {
  padding: 4px 25px;
  color: #fff;
  background-color: #409EFE;
  border-radius: 10px;
}

.indexPage {
  height: 100%;
}

.tabbox {
  width: 1560px;
  height: 87%;
  border-radius: 10px;
  padding: 20px;
}
</style>
